<form nz-form [formGroup]="addEditForm">
  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="sex">用户名</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <input nz-input formControlName="userName" id="userName" placeholder="用户名"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item *ngIf="!isEdit">
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="roleId">密码</nz-form-label>
    <nz-form-control nzExtra="新建用户初始密码为：a123456" [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <input [type]="'password'" nz-input placeholder="密码" formControlName="password" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="sex">性别</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <nz-radio-group formControlName="sex">
        <label nz-radio [nzValue]="1">男</label>
        <label nz-radio [nzValue]="0">女</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="available">状态</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <nz-switch formControlName="available" nzCheckedChildren="可用" nzUnCheckedChildren="禁用"></nz-switch>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="telephone">联系电话</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <input nz-input formControlName="telephone" id="telephone" placeholder="联系电话"/>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="mobile">手机号</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <input nz-input formControlName="mobile" maxlength="11" id="mobile" placeholder="手机号"/>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="email">电子邮箱</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <input nz-input formControlName="email" id="email" placeholder="电子邮箱"/>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="departmentId">所属部门</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <nz-tree-select
        [nzNodes]="deptNodes"
        nzShowSearch
        [nzDropdownMatchSelectWidth]="true"
        nzPlaceHolder="Please select"
        formControlName="departmentId"
      >
      </nz-tree-select>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="roleId">用户角色</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
      <nz-select nzMode="multiple" formControlName="roleId" nzPlaceHolder="角色" >
        <nz-option *ngFor="let option of roleOptions" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>


</form>
<ng-template #combineTpl let-control>
  <ng-container *ngIf="control.hasError('message')">{{control.errors.message}}</ng-container>
  <ng-container *ngIf="control.hasError('required')">必填项</ng-container>
</ng-template>
